/**
 * @author truexin
 * @date   16/04/27
 */
import MuiSlider from '../components/mui/MuiSlider.js';
import PullRefresh from '../components/mui/PullRefresh.js';
import Developing from '../components/Developing.js'

(function (lf, r) {

    var RC = r.createClass,
        doAction = lf.bridgeJs.doAction,
        item_list = [
            {
                bgClass: 'img-rel',
                iconCon: 'controll',
                conText: '约',
                url: ''
            },
            {
                bgClass: 'img-run',
                iconCon: 'place',
                conText: '约跑',
                url: 'yue-run.html'
            },
            {
                bgClass: 'img-rice',
                iconCon: 'app',
                conText: '约饭',
                url: 'yue-rice.html'
            },
            {
                bgClass: 'img-sea',
                iconCon: 'fun',
                conText: '约出海',
                url: 'yue-sea.html'
            },
            {
                bgClass: 'img-walk',
                iconCon: 'info',
                conText: '约走',
                url: 'yue-walk.html'
            },
            {
                bgClass: 'img-sport',
                iconCon: 'prod',
                conText: '约运动',
                url: 'yue-sport.html'
            },
            {
                bgClass: 'img-party',
                iconCon: 'prod',
                conText: '约party',
                url: 'yue-party.html'
            }
        ];
    var Title = RC({
        //componentDidMount: function () {
        //    var div = document.getElementsByClassName('toolbar')[0];
        //    //console.log(div)
        //    setTimeout(function () {
        //        $(div).css({display: 'block'})
        //    }, 1000)
        //},
        render: function () {
            return (
                <div className="toolbar" ref="toolbar">
                    <p>崭新约吧 &nbsp; &nbsp;敬请期待</p>
                </div>
            )
        }
    })
    //var PullRefreshCon = React.createClass({
    //    getInitialState: function () {
    //        return {
    //            page: 1,
    //        }
    //    },
    //    pullupFn: function () {
    //        var newPage = ++this.state.page;
    //        this.setState({page: newPage});
    //    },
    //    render: function () {
    //        var me = this;
    //
    //        return <PullRefresh pullupFn={me.pullupFn} data={<Root page={me.state.page}/>} />;
    //    }
    //});
    var IndexBody = RC({
        getInitialState: function () {
            return {
                showDeveloping: '',
                list: [],
                titles: []
            }
        },
        _showDeveloping() {
            this.setState({showDeveloping: true});
        },
        //componentDidUpdate: function () {
        //    var me=this;
        //    var dt = this.props.data;
        //    var list = [],
        //        titles = [];
        //
        //    $.each(dt, function () {
        //        list.push(this.url);
        //        titles.push(this.conText);
        //    });
        //    me.setState({
        //        list: list,
        //        titles: titles
        //    })
        //    console.log(list);
        //    console.log(titles);
        //    var cells = document.body.querySelectorAll('.mui-table-view-cell');
        //    $(cells).each(function (i) {
        //        var $me = $(this);
        //        $me.off();
        //        console.log($me)
        //        $me.on('tap', function () {
        //            var url = me.state.list[i],
        //                title = me.state.titles[i];
        //            console.log(1)
        //            doAction(url, title);
        //        })
        //    });
        //},
        componentDidMount: function () {
            var $found = $(r.findDOMNode(this.refs.found)),
                $invite = $(r.findDOMNode(this.refs.invite)),
                $cancel = $(r.findDOMNode(this.refs.cancel)),
                $ricePage = $(r.findDOMNode(this.refs.ricePage)),
                $test = $(r.findDOMNode(this.refs.test));

            $found.on('tap', function (e) {
                me._showDeveloping();
                //doAction("yue-found.html", "发现");
            });
            //$test.on('tap', function (e) {
            //    doAction('report-consult.html', '报事咨询');
            //});
            $ricePage.on('tap', function (e) {
                me._showDeveloping();
                //doAction("yue-rice.html", "约饭");
            });

            var $kitchen = $('.kitchen-red');
            $kitchen.on('tap', function (e) {
                me._showDeveloping();
                //doAction("yue-kitchen.html", "厨房详情");
            })
            //mui.init({
            //    pullRefresh: {
            //        container: '#pullrefresh',
            //        up: {
            //            contentrefresh: '正在加载...',
            //            callback: pullupRefresh
            //        }
            //    }
            //});
            //var count = 0;
            var me = this;

            //function pullupRefresh() {
            //    setTimeout(function () {
            //        mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 1)); //参数为true代表没有更多数据了。
                    var table = document.body.querySelector('.mui-table-view');
                    var cells = document.body.querySelectorAll('.mui-table-view-cell');

                    //var dt = me.props.data;
                    //var list = [],
                    //    titles = [];
                    //
                    //$.each(dt, function () {
                    //    list.push(this.url);
                    //    titles.push(this.conText);
                    //});
                    //me.setState({
                    //    list: list,
                    //    titles: titles
                    //})
                    //
                    //$(cells).each(function (i) {
                    //    var $me = $(this);
                    //    $me.off();
                    //    console.log($me)
                    //    $me.on('tap', function () {
                    //        var url = me.state.list[i],
                    //            title = me.state.titles[i];
                    //        console.log(1)
                    //        doAction(url, title);
                    //    })
                    //});
                    var imgClass = [
                        "img-rel", "img-run", "img-rice", "img-sea", "img-walk", "img-sport", "img-party"
                    ];
                    var imgNum = [
                        null, 3345, 3098, 7888, 4589, 2347, 8905
                    ];
                    for (var i = cells.length, len = i + 4; i < len; i++) {
                        var li = document.createElement('li');
                        li.className = 'mui-table-view-cell';
                        li.innerHTML = '<a class=' + imgClass[i] + '><ul><li class="human"></li><li class="countNum">' + imgNum[i] + '</li></ul></a>';//如何把这里元素a的class改为动态获取，即可实现
                        table.appendChild(li);
                    }
        //        }.bind(me));
        //    }

        },

        clickFn: function (e) {
            this._showDeveloping();
            //var me = this;
            //var showBtn = r.findDOMNode(me.refs.showMask);
            //var maskDiv = r.findDOMNode(me.refs.mask);
            //maskDiv.style.display = 'block';
        },
        touchFn: function (e) {
            this._showDeveloping();
            //var me = this;
            //var maskDiv = r.findDOMNode(me.refs.mask);
            //var links = maskDiv.getElementsByTagName('a');
            //if (e.target.nodeName == "A") {
            //    maskDiv.style.display = 'none';
            //}
        },
        render: function () {
            return (
                <div className="yue">
                    <Title/>

                            <ul className="mui-table-view list">
                                <li className="mui-table-view-cell" ref="test">
                                    <a className="img-rel index-big"></a>
                                    <p className="date-time">4月23日&nbsp;星期六</p>
                                    <ul className="point">
                                        <li className="active"></li>
                                        <li></li>
                                        <li></li>
                                    </ul>
                                </li>
                                <li className="mui-table-view-cell">
                                    <a className="img-run">
                                        <ul>
                                            <li className="human"></li>
                                            <li className="countNum">1446</li>
                                        </ul>
                                    </a>
                                </li>
                                <li className="mui-table-view-cell" ref="ricePage"
                                    showDeveloping={this._showDeveloping}>
                                    <a className="img-rice">
                                        <ul>
                                            <li className="human"></li>
                                            <li className="countNum">1244</li>
                                        </ul>
                                    </a>
                                </li>
                            </ul>

                    <ul className="fixed-btn" ref="fixedBtn">
                        <li ref="found" showDeveloping={this._showDeveloping}>
                            <a href="javascript:void(0);">
                                <div className="iconfont found"></div>
                                <span className="text">发现</span>
                            </a>
                        </li>
                        <li onTouchEnd={this.clickFn} ref="showMask" showDeveloping={this._showDeveloping}>
                            <a href="javascript:void(0);">
                                <div className="iconfont predate"></div>
                                <span className="text">预定</span>
                            </a>
                        </li>
                    </ul>
                    <div className="kitchen-mask" ref="mask" onTouchEnd={this.touchFn}>
                        <h3 className="theme">预定</h3>
                        <div className="parent">
                            <a href="javascript:void(0);">
                                <div className="kitchen-red"></div>
                                <span>厨房</span>
                            </a>
                            <a href="javascript:void(0);">
                                <div className="rest-purple"></div>
                                <span>公共餐厅</span>
                            </a>
                        </div>
                        <div className="parent">
                            <a href="javascript:void(0);">
                                <div className="movie-blue"></div>
                                <span>影院</span>
                            </a>
                            <a href="javascript:void(0);">
                                <div className="ktv-yellow"></div>
                                <span>KTV</span>
                            </a>
                        </div>
                        <div className="parent">
                            <a href="javascript:void(0);">
                                <div className="basketball-blue"></div>
                                <span>篮球场</span>
                            </a>
                            <a href="javascript:void(0);">
                                <div className="gym-blue"></div>
                                <span>健身房</span>
                            </a>
                        </div>
                    </div>
                    <Developing show={this.state.showDeveloping} style={{bottom:'5rem'}}/>
                </div>
            )
        }
    });

    r.render(
        <PullRefresh data={<IndexBody data={item_list}/>} fixed='.fixed-btn'/>,
        //<IndexBody data={item_list}/>,
        document.getElementById('root'), function () {
            
            // let env = lf.utils.getEnv(),
            //     systemFlag = lf.utils.getSys();
            //
            // if (env == 'app' && systemFlag == 'IOS') {
            //     $('.yue').css({marginBottom: '.55rem'});
            // }
            $('.mui-scroll').css({background: '#000'});
            // $('body.lf-ios').css({marginBottom: '.6rem'});
        }
    )

})(liefeng, React)
